<template>
	<view class="content">
		<!-- <view class="input-v">
			<uni-search-bar  :radius="100" @confirm="search"></uni-search-bar>
		</view> -->
		
			<vgt-tab  :list="parentNameList" @onValueChange="onValueChange"></vgt-tab>
			<view class="list">
				<text class="smallItem"  @click="lookDetail(item)" v-for="(item, index) in chlidList" :key="index">{{item.name}}</text>
			</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				parentNameList:[],
				parentList:[],
				chlidList:[]
			}
		},methods:{
			onValueChange(val){
				let parentId = this.parentList[val.currentInd].classid;
				let that = this;
				let opts = {
					url: 'cookBook/getCateByParent/'+parentId,
					method: 'get'
				};
				let param = {};
				this.baseRequest(opts, param).then(res => {
					uni.hideLoading();
					that.chlidList = [];
					let rData = JSON.parse(JSON.stringify(res.data));
					that.chlidList = rData;
				}, error => {})
			},
			lookDetail(item){
				uni.showLoading({
					mask: true,
					title:''
				})
				uni.navigateTo({
				    url: 'list?classid='+item.classid
				});
			}
		},onLoad() {
			let that = this;
			let opts = {
				url: 'cookBook/getCate',
				method: 'get'
			};
			let param = {};
			this.baseRequest(opts, param).then(res => {
				uni.hideLoading();
				let rData = JSON.parse(JSON.stringify(res.data));
				that.parentList = rData.parentCateList;
				that.chlidList = rData.childCateList;
				for (let i = 0; i < that.parentList.length; i++) {
					that.parentNameList.push(that.parentList[i].name);
				}
			}, error => {})
		}
	} 
</script>

<style>
	.list{
		padding: 20rpx;
	}
	.item{
		background-color: #fff;
		padding-top: 20rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 15rpx;
	}
	.itemBig{
		margin-bottom: 20rpx;
		font-size: 38rpx;
	}
	.smallItem{
		margin-top: 15rpx;
		color:#e98f36;
		display: inline-block;
		font-size: 32rpx;
		padding:5rpx 20rpx;
		border-radius: 15rpx;
		margin: 15rpx;
		border: 1rpx solid #e98f36;
		
	}
	.input-v{
		background-color: #e98f36;
	}
	.smallItem:active {
		top: 8rpx;
		background-color: #e98f36;
		color: #fff;
	}
</style>
